<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计</title></title>

    <!-- vue -->
    <script src="/assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="/assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="/assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="/assets/jquery-3.6.1.min.js"></script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="12">
                <div id="box1" style="height: 300px">


               </div>
            </el-col>
            <el-col :span="12"><div id="box2"></div></el-col>
        </el-row>

    </div>

<!--echarts-->
<script type="text/javascript" src="../assets/echarts.all.js" ></script>

<script type="application/javascript">
    var vm = new Vue({
        el:"#app",
        data(){
            return{
                chartSet:[],
                xData1:[],
                yData1:[],
            }
        },
        created(){
          this.getWorkStats();
        },
        methods:{
            getWorkStats(){
                $.ajax({
                    method:"POST",
                    url:"/work/stats",
                    success:(res)=>{
                        if(res.list && res.list.length>0){
                            res.list.forEach((item)=>{
                                this.xData1.push(item.startWork);
                                this.yData1.push(item.people);
                            })
                            this.initChart1();
                        }
                    }
                })
            },
            initChart1(){
                var myChart1 = echarts.init(document.getElementById('box1'));

                var options = {
                    title: {
                        text: '今日上班情况统计',
                        x:'center',
                        y:'top',
                    },
                    xAxis:{
                        name:'上班时间',
                        type: 'category',
                        data: this.xData1,
                    },
                    yAxis: {
                        name:'人数',
                        type: 'value'
                    },
                    series:{
                        data:this.yData1,
                        type:'bar'
                    }
                }
                myChart1.setOption(options);
            },
        }


    })

</script>


</body>
</html>